<template>
    <view style="height: 100%">
       <!-- <nav v-if="!showCustom" title="积分" image="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/back.png" txtColor="#18181A" :show_bol="false"></nav> -->
        <!-- <navLod
            v-if="showCustom"
            txtColor="#18181A"
            :bgColor="bgColor"
            image="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/back.png"
            title="积分"
            :show_bol="false"
        ></navLod> -->
        <view>
            <view class="header">
                <image class="header-image" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png" style="width: 100%"></image>
                <view class="header-top current-integral">
                    <view class="integra-text">当前积分</view>
                    <!-- style="opacity:{{ruleVisible?0:1}}" -->
                    <view class="dashboard" v-if="isShowCanvas">
                        <weapp-plugin-dashboard
                            :min="0"
                            :max="maxGap"
                            :val="(marketingAllMemberInfo.integral || 0) + (marketingAllMemberInfo.frozenIntegral || 0)"
                            :width="350"
                            :height="161"
                            :colors="myColors"
                        ></weapp-plugin-dashboard>

                        <view class="dashboard_left flex-column-start">
                            <view class="title">可用积分</view>
                            <view class="count">{{ marketingAllMemberInfo.integral || 0 }}</view>
                        </view>
                        <view class="dashboard_right flex-column-start">
                            <view class="title flex-row-start">
                                冻结积分
                                <view class="g flex-row-center" @tap="showTips">
                                    <text>!</text>
                                    <view class="g-tips" v-if="isShowTips" style='transform: scale(0.8);'>
                                        <view>冻结积分：指退款等原因暂时冻结的积分，冻结期间不可使用</view>
                                        <!-- <view>免服务费次数，冻结期间不可使用</view> -->
                                        <image class="tips-bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/tips-bg.png"></image>
                                    </view>
                                </view>
                            </view>
                            <view class="count">{{ marketingAllMemberInfo.frozenIntegral || 0 }}</view>
                        </view>
                    </view>
                    <view>
                        <view class="integral-rules" @tap="openIntegralRule">积分规则</view>
                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/Illustration.png" alt="" class="Illustration-img" />
                    </view>
                </view>
                <view class="integral-subsidiary" :style="'padding-top:' + (widnowH <= 736 ? 0 : 0) + 'px;'">
                    <view class="subsidiary">积分明细</view>
                    <view class="more" @tap="lookMore">
                        查看更多
                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/turn_act.png"></image>
                    </view>
                </view>
                <view class="integral-list">
                    <view class="integral-list-item" v-for="(item, index) in list" :key="index">
                        <view class="integral-list-item-content">
                            <view class="integral-list-item-children1">
								
                                <view class="type" v-if="item.sourceType == 2">成长等级会员</view>
                                <view class="type" v-if="item.sourceType == 3">付费会员</view>
                                <view class="type" v-if="item.sourceType == 4">推广</view>
                                <view class="type" v-if="item.sourceType == 5">充值奖励活动</view>
                                <view class="type" v-if="item.sourceType == 6">累计消费活动</view>
                                <view class="type" v-if="item.sourceType == 7">单笔折扣活动</view>
                                <view class="type" v-if="item.sourceType == 8">站点优惠活动</view>
                                <view class="type" v-if="item.sourceType == 9">邀请奖励</view>
                                <view class="type" v-if="item.sourceType == 10">新客有礼</view>
                                <view class="type" v-if="item.sourceType == 11">多人拼团</view>
                                <view class="type" v-if="item.sourceType == 12">消耗</view>
                                <view class="type" v-if="item.sourceType == 13">退款冻结</view>
                                <view class="type" v-if="item.sourceType == 14">退款核销</view>
                                <view class="type" v-if="item.sourceType == 16">充电消费</view>

                                <view class="price" v-if="item.type == 1">+{{ item.amount }}</view>
                                <view v-else>{{ item.amount }}</view>
                            </view>
                            <view class="integral-list-item-children2">
                                <!-- <view class="integral-num-name">积分:<text class="integral-num"> 20</text></view> -->
                                <view class="integral-date">{{ item.createTime }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="returnToTop" @tap="goTop">
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/Returntotop.png" class="returnToTop-img"></image>
                </view>
            </view>
        </view>
<!--        <view v-else>
            <Upgrading text="暂无内容"></Upgrading>
        </view> -->
		
		<!-- < :show="show" @close="close" @open="open">
		            <view>
		                <text>出淤泥而不染，濯清涟而不妖</text>
		            </view>
				</u-popup> -->	
        <u-modal z-index="1000" use-slot :show="ruleVisible" confirmText="我知道了" @confirm="onClose" @close="onClose" class="integral-rules-wrap">
            <view class="integral-rules">
                <view class="integral-rules-text">积分规则</view>
                <view class="integral-rules-content">
                    <rich-text :nodes="integralRule" class="integral-rules-bottom" style="word-break: break-all"></rich-text>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script>
	// 'use strict';
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import nav from '../../../components/nav/nav';
// import navLod from '../../../components/navLod/navLod';
import weappPluginDashboard from '../../../components/weapp-plugin-dashboard/miniprogram_dist/index';
// console.log(weappPluginDashboard,'123')
// import vanDialog from './@vant/weapp/dialog/index';
import Upgrading from '../../../components/upgrading/upgrading';
// mine/pages/integral/integral.ts
import { getMemberGradeRule, getIntegral, getIntegralDetail } from '../../../api/https';
import { getIntegralList, getMarketingAllMemberInfo } from '../../../api/marketing/marketing';
export default {
    components: {
        // nav,
        // navLod,
        weappPluginDashboard,
        // vanDialog,
        Upgrading
    },
    data() {
        return {
            bar_Height: uni.getSystemInfoSync().statusBarHeight,
            widnowH: uni.getSystemInfoSync().screenHeight,
            showCustom: false,
            integralList: [],
            integralRule: '',
            ruleVisible: false,
            gap: 0,
            maxGap: 100,
            no_scroll: true,
            isShowCanvas: true,
            list: [],

            config: {
                current: 1,
                size: 10
            },

            data: {},

            marketingAllMemberInfo: {
                integral: '',
                frozenIntegral: ''
            },

            bgColor: '',
            isShowTips: '',
            myColors: ''
        };
    },
    onLoad: function () {
        this.memberGradeRule();
        this.memberIntegral();
        this.IntegralDetail();
        this.getIntegralList();
        this.getMarketingAllMemberInfo();
    },
    onPageScroll(e) {
        let height = this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45;
        if (e.scrollTop > height) {
            this.setData({
                showCustom: true,
                bgColor: '#ffffff'
            });
        } else {
            this.setData({
                showCustom: false
            });
        }
        if (e.scrollTop > 200) {
            this.setData({
                no_scroll: false
            });
        } else {
            this.setData({
                no_scroll: true
            });
        }
    },
    methods: {
        // 获取用户（付费会员，成长会员）信息
        getMarketingAllMemberInfo() {
            getMarketingAllMemberInfo().then((res) => {
                this.setData({
                    marketingAllMemberInfo: res.data || {}
                });
            });
        },

        async getIntegralList() {
            try {
                let res = await getIntegralList(this.config);
                console.log(res.data, 123456);
                this.setData({
                    data: res.data,
                    list: res.data.records
                });
            } catch (error) {}
        },

        showTips() {
            this.setData({
                isShowTips: !this.isShowTips
            });
        },

        lookMore() {
            uni.navigateTo({
                url: '../../pages/integralSubsidiaryYxhk/integralSubsidiaryYxhk'
            });
        },

        memberGradeRule() {
            const tmp = this;
            getMemberGradeRule({})
                .then((res) => {
                    if (res.code == 0) {
                        if (res.data.integralConfig.content.length) {
                            tmp.setData({
                                integralRule: res.data.integralConfig.content
                            });
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        memberIntegral() {
            const tmp = this;
            getIntegral({})
                .then((res) => {
                    if (res.code == 0) {
                        if (res.data.gap && res.data.percentage) {
                            const maxGap = parseInt(res.data.nextNumber);
                            tmp.setData({
                                gap: res.data.consumeIntegral,
                                maxGap
                            });
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        IntegralDetail() {
            const tmp = this;
            getIntegralDetail({
                current: 1,
                size: 10
            })
                .then((res) => {
                    if (res.code == 0) {
                        if (res.data.records.length) {
                            tmp.setData({
                                integralList: res.data.records
                            });
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        openIntegralRule() {
            this.setData({
                ruleVisible: true,
                isShowCanvas: false
            });
        },

        goTop() {
            if (uni.pageScrollTo) {
                uni.pageScrollTo({
                    scrollTop: 0
                });
            } else {
                uni.showModal({
                    title: '提示',
                    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
                });
            }
        },

        onClose() {
            this.setData({
                ruleVisible: false,
				isShowCanvas:true
            });
        }
    }
}
</script>

<style lang="less" scoped>
	@import "../../../commin/commin.less";
	@import "../../../commin/flex.less";
	
	page {
	    background-color: #F5F7FA;
	}
	
	.header {
	    .header-image {
	        .position(relative, 0, 0, 0, 0);
	        .kuangao(100%, 556rpx);
	    }
	
	    .header-top {
	        width: 100%;
	        .position(absolute, 0, auto, auto, 0);
	    }
	
	    .current-integral {
	        width: 702rpx;
	        height: 382rpx;
	        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
	        border: 2rpx solid #FFFFFF;
	        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
	        border-radius: 16rpx;
	        background-color: #fff;
	        .margins(70rpx, 24rpx, 0rpx, 24rpx);
	
	        .integra-text {
	            margin-top: 45rpx;
	            margin-left: 35rpx;
	            font-size: 32rpx;
	            font-family: PingFang SC;
	            font-weight: bold;
	            color: #18181A;
	        }
	
	        .dashboard {
	            // text-align: center;
	            position: relative;
	            line-height: 1;
	
	            .title {
	                font-size: 26rpx;
	                font-weight: 400;
	                color: #606266;
	                margin-bottom: 20rpx;
	            }
	
	            .count {
	                font-size: 36rpx;
	                font-weight: bold;
	                color: #18181A;
	            }
	
	            .dashboard_left {
	                position: absolute;
	                left: 50rpx;
	                bottom: 20rpx;
	            }
	
	            .dashboard_right {
	                position: absolute;
	                right: 50rpx;
	                bottom: 20rpx;
	
	                .g {
	                    width: 25rpx;
	                    height: 25rpx;
	                    border-radius: 50%;
	                    border: 1rpx solid #C0C4CC;
	                    color: #228EFA;
	                    font-size: 16rpx;
	                    margin-left: 15rpx;
	                    position: relative;
	
	                    .g-tips {
	                        position: absolute;
	
	                        width: 325rpx;
	                        height: 103rpx;
	                        left: -250rpx;
	                        top: -110rpx;
	                        z-index: 1;
	                        padding: 20rpx;
	                        padding-top: 16rpx;
	                        box-sizing: border-box;
	                        line-height: 1.3;
	                        font-size: 18rpx;
	                        font-weight: 400;
	                        color: #909399;
	
	                        .tips-bg {
	                            width: 100%;
	                            height: 100%;
	                            position: absolute;
	                            left: 0;
	                            top: 0;
	                            z-index: -1;
	
	                        }
	
	                    }
	                }
	            }
	        }
	
	        .integral-rules {
	            position: absolute;
	            font-size: 24rpx;
	            font-family: PingFang SC;
	            font-weight: 400;
	            color: #1487FA;
	            bottom: 0;
	            left: 32rpx;
	            bottom: 20rpx;
	        }
	
	        .Illustration-img {
	
	            width: 229rpx;
	            height: 159rpx;
	            position: absolute;
	            bottom: 0;
	            right: 0;
	        }
	    }
	
	    .integral-subsidiary {
	        // .position(absolute, 382rpx, auto, auto, 0);
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        padding: 40rpx 56rpx 40rpx 48rpx;
	        box-sizing: border-box;
	
	        .subsidiary {
	            font-size: 34rpx;
	            font-family: PingFang SC;
	            font-weight: bold;
	            color: #18181A;
	        }
	
	        .more {
	            display: flex;
	            align-items: center;
	            font-size: 28rpx;
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: #1487FA;
	
	            image {
	                margin-left: 17rpx;
	                .kuangao(16rpx, 27rpx);
	            }
	        }
	    }
	
	    .integral-list {
	        position: absolute;
	        width: 100%;
	
	        // .position(absolute, 494rpx, auto, auto, 0);
	        // margin-bottom: 40rpx;
	        // width: 100%;
	        .integral-list-item {
	            margin: 0 24rpx;
	            background-color: #fff;
	            padding-top: 40rpx;
	
	            .integral-list-item-content {
	                margin: 0rpx 32rpx;
	                border-bottom: 1rpx dashed #C0C4CC;
	
	                .integral-list-item-children2 {
	                    margin-bottom: 40rpx;
	                }
	
	                .integral-list-item-children1,
	                .integral-list-item-children2 {
	                    width: 100%;
	                    display: flex;
	                    justify-content: space-between;
	                    align-items: center;
	                    margin-top: 25rpx;
	
	                    .type {
	                        font-size: 30rpx;
	                        font-family: PingFang SC;
	                        font-weight: bold;
	                        color: #303133;
	                    }
	
	                    .price {
	                        font-size: 34rpx;
	                        font-family: DIN;
	                        font-weight: bold;
	                        color: #FC724C;
	                    }
	
	                    .integral-num-name {
	                        font-size: 26rpx;
	                        font-family: PingFang SC;
	                        font-weight: 500;
	                        color: #606266;
	                    }
	
	                    .integral-num {
	                        font-size: 26rpx;
	                        font-family: PingFang SC;
	                        font-weight: 500;
	                        color: #FC724C;
	                    }
	
	                    .integral-date {
	                        font-size: 24rpx;
	                        font-family: PingFang SC;
	                        font-weight: 400;
	                        color: #606266;
	                    }
	
	                }
	            }
	
	        }
	
	        .integral-list-item:nth-child(1) {
	            border-top-left-radius: 16rpx;
	            border-top-right-radius: 16rpx;
	        }
	
	        .integral-list-item:nth-last-child(1) {
	            border-bottom-left-radius: 16rpx;
	            border-bottom-right-radius: 16rpx;
	
	            .integral-list-item-content {
	                border-bottom: none;
	
	                .integral-list-item-children2 {
	                    padding-bottom: 40rpx;
	                }
	            }
	
	        }
	
	    }
	
	    .returnToTop {
	        position: fixed;
	        bottom: 45rpx;
	        right: 16rpx;
	        width: 48rpx;
	        height: 48rpx;
	
	        .returnToTop-img {
	            width: 100%;
	            height: 100%;
	        }
	    }
	
	    .van-button__text {
	        width: 270rpx;
	        height: 88rpx;
	        background: linear-gradient(105deg, #2B99FF, #1B8CF5);
	        box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
	        border-radius: 44rpx;
	        font-size: 30rpx;
	        font-family: PingFang SC;
	        font-weight: bold;
	        color: #FFFFFF;
	        line-height: 88rpx;
	    }
	}
	
	.integral-rules-wrap {
	    z-index: 99;
	
	    .van-dialog__footer {
	        .textalign();
	        margin-bottom: 20rpx;
	
	        .van-button--default {
	            .kuangao(270rpx, 88rpx);
	            background: linear-gradient(105deg, #2B99FF, #1B8CF5);
	            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
	            border-radius: 44rpx;
	            font-size: 30rpx;
	            font-family: PingFang SC;
	            font-weight: bold;
	            color: #FFFFFF !important;
	
	        }
	    }
	
	    .integral-rules {
	
	        .integral-rules-text {
	            margin-left: 34rpx;
	            margin-top: 47rpx;
	            margin-bottom: 40rpx;
	            font-size: 38rpx;
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: #18181A;
	        }
	
	        .integral-rules-content {
	            margin: 0 49rpx 40rpx 31rpx;
	            font-size: 30rpx;
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: #303133;
	
	            .integral-rules-bottom {
	                word-break: break-all;
	            }
	        }
	    }
	}
</style>
